﻿$(document).ready(function () {


    $("#departamento").change(function () {
        //esto dice , si ocurre un cambio entonces hacemos lo siguiente.
        var iddepa = $("#departamento").val(); //sacmos el valor del item seleccionado
        var jsonDepa = {
        depa: iddepa,
        };  // preparamos una entrada para el metodo con json
        //hacemos un Ajax para jalarnos las provincias
        $.ajax({
            type: "POST", //el tipo de envio POST o GET
            data: JSON.stringify(jsonDepa), 
            dataType: "json", //el tipo de dato ya sea plano : plain, html, o Json
            contentType: "application/json; charset=utf-8", //para que le ponga cabecera UTF8
            url: "Home/ProvinciasPorDepartamento", //ruta de la forma {Controller/{Method}}
            success: function (data) {
            /*
            Logica, a partir de la data (que es lo q nos devuelve el metodo), item por item sacamos el idprovincia y el nombre
            para ir formando dinamicamente el select option. es similar al lenguaje C
            */
            var result = '<option value="" selected="selected">Escoja Provincia</option>';
                $.each(data, function (i, item) {
                   result += '<option value= "' + item.IdProvincia + '">' + item.Nombre + '</option>';
                });
                $('#provincia').html(result);
            }
        });
    });

     $("#provincia").change(function () {
        var idpro = $("#provincia").val();
        var jsonDistrito = {
        pro: idpro,
        }; 
        $.ajax({
            type: "POST", 
            data: JSON.stringify(jsonDistrito), 
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            url: "Producto/DistritosPorProvincia", 
            success: function (data) {
            var result = '<option value="" selected="selected">Escoja Distrito</option>';
                $.each(data, function (i, item) {
                   result += '<option value= "' + item.IdDistrito + '">' + item.Nombre + '</option>';
                });
                $('#distrito').html(result);
            }
        });
    });



    
});
